<template>
  <div class="apply" v-loading="pageLoading">
    <el-tabs class="resultIdea" v-model="activeName">
      <el-tab-pane label="基本信息" name="first">
        <el-form
          class="earlyMappingForm"
          :inline="true"
          label-position="right"
          label-width="80px"
          :model="reviewData_1"
          ref="formData"
          :rules="formDataRules"
        >
          <div class="maintitle">申请项目实施(市级项目)</div>
          <el-form-item label="实施金额" style=" margin-right:80px;">
            <el-input
              style="width:180px"
              type="number"
              v-model="formData.implementationAmount"
              disabled
            >
              <i slot="suffix">万元</i>
            </el-input>
          </el-form-item>
          <el-form-item label="实施规模">
            <el-input
              style="width:180px"
              type="number"
              v-model="formData.implementationScale"
              disabled
            >
              <i slot="suffix">公顷</i>
            </el-input>
          </el-form-item>
          <div>
            <el-form-item label="项目实施申请书" label-width="120px">
              <!-- <el-upload
                class="upload-demo"
                action="/pc/file/upload"
                :limit="1"
                :file-list="fileList[0]"
                disabled
              >
                <el-button @click="seePdf" size="small">查看</el-button>
              </el-upload>-->
              <seeFujianForList v-if="fileList[0]" @openPdf="seePdf" :file-obj="fileList[0]" :file-num="0" />
            </el-form-item>
          </div>
          <div class="maintitle">申请项目实施区县意见</div>
          <div class="formAllRow">
            <div>
              <div class="area">区县中心审查意见</div>
              <el-form-item>
                <el-input
                  style="width:1000px;"
                  :rows="6"
                  type="textarea"
                  v-model="reviewData.opinion"
                  disabled
                ></el-input>
              </el-form-item>
            </div>
          </div>
          <div class="formcontent">
            <div>
              <el-form-item label="审查人" label-width="60px">
                <img
                  style="width: 100px;"
                  :src="`${baseUrl}${reviewData.signature || signature}`"
                  alt
                />
              </el-form-item>
              <el-form-item label="审查日期" label-width="110px">
                <el-date-picker
                  value-format="yyyy-MM-dd HH:mm:ss"
                  v-model="reviewData.createTime"
                  disabled
                ></el-date-picker>
              </el-form-item>
              <el-form-item label="审查意见" label-width="110px">
                <el-select v-model="status_1" disabled>
                  <el-option label="同意" value="0"></el-option>
                  <el-option label="不同意" value="1"></el-option>
                </el-select>
              </el-form-item>
            </div>
          </div>

          <div class="formAllRow">
            <div>
              <div class="area">区县局审查意见</div>
              <el-form-item prop="opinion">
                <el-input
                  style="width:1000px;"
                  :rows="6"
                  type="textarea"
                  v-model="reviewData_1.opinion"
                  :readonly="disabled"
                ></el-input>
              </el-form-item>
            </div>
          </div>

          <div class="formcontent">
            <div>
              <el-form-item label="审查人" label-width="60px">
                <img
                  style="width: 100px;"
                  :src="`${baseUrl}${reviewData_1.signature || signature}`"
                  alt
                />
              </el-form-item>
              <el-form-item label="审查日期" label-width="110px">
                <el-date-picker
                  :readonly="disabled"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  v-model="reviewData_1.createTime"
                ></el-date-picker>
              </el-form-item>
              <el-form-item label="审查意见" label-width="110px">
                <el-select :disabled="disabled" v-model="status_2">
                  <el-option label="同意" value="0"></el-option>
                  <el-option label="不同意" value="1"></el-option>
                </el-select>
              </el-form-item>
            </div>
          </div>

          <div style="margin-top:50px;">
            <el-form-item>
              <el-button v-if="!disabled" type="primary" @click="onSubmit">提交</el-button>
              <el-button v-if="!disabled" @click="back">取消</el-button>
              <el-button v-if="disabled" @click="back">返回</el-button>
            </el-form-item>
          </div>
        </el-form>
      </el-tab-pane>

      <el-tab-pane label="审查流程" name="second">
        <div class="processContainer">
          <process :processData="processData"></process>
        </div>
      </el-tab-pane>
    </el-tabs>
    <el-dialog :close-on-click-modal="false" :title="pdfName" :visible.sync="pdfFlag" width="50%">
      <div class="pdfBox">
        <iframe :src="$https + pdfUrl" style="width:100%;height:600px;" frameborder="0"></iframe>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import process from "../public/process";
import config from "@/config/index.js";
import { getSignature } from "@/api/feasibilityStudy/countyReviewOpinions.js";
import {
  getProjectImplementation,
  addReviewOpinion,
  searchReviewOpinion,
  searchReviewList
} from "@/api/project1/projectImplementation/apply/index.js";
import { validateNotNull } from "@/utils/validate.js";
import seeFujianForList from "@/components/seeFujianForList";
export default {
  components: {
    process: process,
    seeFujianForList
  },
  data() {
    return {
      activeName: "first", //当前显示的tab-pane
      processData: [], //审查流程
      formData: {
        //提交值
        projectId: localStorage.getItem("projectId"),
        implementationAmount: null,
        implementationScale: null,
        implementationApplyBookFileId: null,
        implementationApplyBookFileInfo: {}
      },
      fileList: [], //上传文件
      reviewData: {
        //添加审查意见
        projectId: localStorage.getItem("projectId"),
        groupId: 10,
        type: 0,
        opinion: null,
        signature: null,
        createTime: null,
        status: null
      },
      status_1: null,
      reviewData_1: {
        //添加审查意见
        projectId: localStorage.getItem("projectId"),
        groupId: 10,
        type: 1,
        opinion: null,
        signature: null,
        createTime: null,
        status: null
      },
      formDataRules: {
        opinion: [{ validator: validateNotNull, trigger: "blur" }]
      },
      status_2: "0",
      InquireOpinion: {
        //查询审查意见(区县中心)
        projectId: localStorage.getItem("projectId"),
        groupId: 10,
        type: 0
      },
      InquireOpinion_1: {
        //查询审查意见(区县局)
        projectId: localStorage.getItem("projectId"),
        groupId: 10,
        type: 1
      },
      pageLoading: false,
      disabled: true,
      baseUrl: config.baseUrlImg,
      signature: "",
      pdfUrl: "",
      pdfFlag: false,
      pdfName: ""
    };
  },
  created() {
    if (this.$route.name === localStorage.getItem("key")) {
      this.disabled = false;
    }
    if (localStorage.getItem("lookStatus") == 2) {
      this.disabled = true;
    }
    this.getSignature();
    this.getTime();
  },
  methods: {
    //查看当前PDF
    seePdf(num) {
      this.pdfFlag = true;
      this.pdfUrl = this.fileList[num][0].url;
      this.pdfName = this.fileList[num][0].name;
    },
    getTime() {
      var date = new Date();
      var year = date.getFullYear();
      var month = date.getMonth() + 1;
      var day = date.getDate();
      if (month < 10) {
        month = "0" + month;
      }
      if (day < 10) {
        day = "0" + day;
      }
      var trueTime = year + "-" + month + "-" + day;

      this.reviewData.createTime = trueTime;
      this.reviewData_1.createTime = trueTime;
      this.getDetail();
    },
    getSignature() {
      //获取用户签名
      getSignature().then(res => {
        this.signature = res.data;
      });
    },
    //获取数据
    getDetail() {
      this.pageLoading = true;
      //获取基本信息（回显）
      getProjectImplementation({
        projectId: localStorage.getItem("projectId")
      }).then(res => {
        this.pageLoading = false;
        if (res.code == 1000) {
          this.formData = res.data;
          this.fileList.push([
            {
              name: this.formData.implementationApplyBookFileInfo.fileName,
              url: this.formData.implementationApplyBookFileInfo.filePath
            }
          ]);
        }
      });
      //查询审查意见（区县中心回显）
      searchReviewOpinion(this.InquireOpinion).then(res => {
        if (res.code == 1000) {
          if (res.data) {
            this.reviewData = res.data;
            this.reviewData.createTime = res.data.createTime.slice(0, 10);
            this.status_1 = String(res.data.status);
          }
        }
      });
      //查询审查意见（区县局回显）
      searchReviewOpinion(this.InquireOpinion_1).then(res => {
        if (res.code == 1000) {
          if (res.data) {
            this.reviewData_1 = res.data;
            this.reviewData_1.createTime = res.data.createTime.slice(0, 10);
            this.status_2 = String(res.data.status);
          }
        }
      });
      //查询审查流程列表
      searchReviewList({
        projectId: localStorage.getItem("projectId"),
        groupId: 10
      }).then(res => {
        if (res.code == 1000) {
          var temp = [];
          for (let i = 0; i < res.data.length; i++) {
            let processList = {}; //初始化
            var createTime = res.data[i].createTime.slice(0, 10);
            if (res.data[i]) {
              processList["isReview"] = true;
              processList["institutions"] = res.data[i].name;
              processList["groupId"] = res.data[i].groupId;
              processList["type"] = res.data[i].type;
              processList["date"] = createTime;
              processList["people"] = res.data[i].signature;
              processList["advice"] = res.data[i].opinion;
              processList["status"] = res.data[i].status;
            }
            temp.push(processList);
          }
          this.processData = temp;
        }
      });
    },
    //提交
    onSubmit() {
      this.$refs["formData"].validate(valid => {
        if (valid) {
          const loading = this.$loading({
            lock: true,
            text: "Loading",
            spinner: "el-icon-loading",
            background: "rgba(0, 0, 0, 0.7)"
          });
          this.reviewData_1.status = parseInt(this.status_1);
          this.reviewData_1.createTime =
            this.reviewData_1.createTime + " " + "00:00:00";
          this.reviewData_1.signature = this.signature;
          addReviewOpinion(this.reviewData_1)
            .then(res => {
              loading.close();
              this.$message({
                message: "提交成功",
                type: "success"
              });
              this.$router.push(
                "/projectManagement/projectImplementation/dealwith"
              );
            })
            .catch(err => {
              loading.close();
            });
        }
      });
    },
    //返回列表
    back() {
      this.$router.push("/projectManagement/projectImplementation/dealwith");
    }
  }
};
</script>
<style lang="scss" scoped>
.apply {
  .resultIdea {
    /deep/ .el-tabs__content {
      overflow: unset;
    }
    /deep/ .el-tabs__header {
      background: #fff;
      height: 46px;
      padding: 0 20px;

      /deep/ .el-tabs__item {
        height: 36px;
        line-height: 36px;
        margin-top: 10px;
        padding: 0 10px;
      }

      /deep/ .el-tabs__nav-wrap::after {
        width: 0;
      }
    }

    .earlyMappingForm {
      /deep/ .el-form-item__label {
        color: #8c8c8c;

        text-align: right;
      }
      /deep/ .el-input__suffix {
        i {
          font-style: normal;
        }
      }
      input {
        // width: 220px;
        height: 36px;
        line-height: 36px;
        font-size: 14px;
      }
    }

    .formAllRow {
      /deep/ .el-form-item__content .el-textarea .el-textarea__inner {
        width: 1170px;
        max-width: calc(100vw - 320px - 60px);
      }

      /deep/ .el-form-item__label {
        display: block;
        text-align: left;
        margin-top: 15px;
      }

      /deep/ .el-form-item {
        width: 100%;
      }
    }
  }
}
</style>
<style lang="scss" scoped>
.processContainer {
  background: #fff;
  position: absolute;
  width: 100%;
  top: 0;
  bottom: 0;
  height: calc(100vh - 230px);
}
.apply {
  height: calc(100vh - 114px);
  padding: 30px;
  overflow: auto;
  background: #f5f6f7;
  .earlyMappingForm {
    background: #fff;
    padding: 20px;
    min-height: calc(100vh - 230px);
  }
  .maintitle {
    font-size: 18px;
    font-family: PingFang SC;
    font-weight: bold;
    line-height: 25px;
    color: #4d4d4d;
    margin-top: 60px;
    margin-bottom: 30px;
    &:first-child {
      margin-top: 0;
    }
  }
  .basicInfo {
    span {
      display: inline-block;
      margin: 20px 60px 0 0;
      font-size: 14px;
      color: #8c8c8c;
    }
  }
  .formcontent {
    margin-top: 30px;
  }
  .secondtitle {
    font-size: 14px;
    font-family: PingFang SC;
    font-weight: 500;
    line-height: 20px;
    margin-right: 20px;
    line-height: 38px;
  }
  .area {
    padding: 0 0 15px 0;
  }
}
</style>

